//项目根组件，其中组件被渲染到页面之中展示的流程是 App.js -> index.js -> public/index.html(root)

import {useEffect,useState} from 'react';

const name = 'Chen';
function greet(name) {
  return `Hello, ${name}`;
}
const user = {
  name: 'Chen',
  age: 28
};
const list = [
  {id: 1, name: 'Chen', age: 28},
  {id: 2, name: 'Jane', age: 25},
  {id: 3, name: 'Tom', age: 30}
];

const flag = false;

const articleType = 0;
function articleTypeDoing() {
  if (articleType === 0) {
    return <span>无图</span>;
  } else if (articleType === 1) {
    return <span>单图</span>;
  } else {
    return <span>三图</span>;
  }
}

// 自定义组件
function MyComponent() {
  return <div>This is a custom component</div>;
}
const MyComponent2 = () => {
  return <div>This is a custom component2</div>;
}


function App() {
  const a = () => {
    if (articleType === 0) {
      return <span>无图</span>;
    } else if (articleType === 1) {
      return <span>单图</span>;
    } else {
      return <span>三图</span>;
    }
  };
  const list = [
    {id: 1, name: 'Chen', age: 28},
    {id: 2, name: 'Jane', age: 25},
    {id: 3, name: 'Tom', age: 30}
  ];
  const handleClick = (e) => {      
    alert('Hello, React!' , e);
  };
  const handleClickSelf = (name) => {      
    alert('Hello, React!' , name);
  };
  const handleClickSelfAndEvent = (name, e) => {      
    alert('Hello, React!' , name, e);
  };

  let useEffectNumber = 0;
  useEffect(() => {
    useEffectNumber++;
    console.log('useEffectNumber:', useEffectNumber);
  }, []);

  return (
    <div className="App">
      <h1>Hello, React!,{useEffectNumber}</h1>


      <h1>Welcome to React</h1>

      {/* 1.使用引号传递字符串 */}
      {'This is a string'}

      {/* 2.使用javaScript变量 */}
      {name}

      {/* 3.函数调用和方法调用 */}
      {greet('Chen')}
      {new Date().toLocaleDateString()}

      {/* 4.使用JavaScript对象 */}
      <div style={{"backgroundColor": "red"}}>This is a JavaScript object: {user.name}, {user.age}</div>


{/* 列表渲染 */}
{/* 其中这里有几个细节，首先是map这个常用在数组上的方法，它可以遍历数组中的每一项，并返回一个新的数组，这
里我们用它来渲染一个列表，并给每一项添加一个唯一的key值，这个key的定义也很重要，这样React才知道哪些项是新
的还是旧的，从而优化渲染效率。 */}
{/* 针对这个key要求是唯一且类型要么是字符串，要么是number类型 */}
      <div>
        <ul>
          {list.map(item => (
            <li key={item.id}>
              {item.name}, {item.age}
            </li>
          ))}
        </ul>
      </div>

      {/* 条件渲染 */}
      {flag && <span>This is a flag</span>}
      <br />
      {flag ? <span>This is a flag</span> : <span>This is not a flag</span>}

      <br />
      {/* 复杂条件渲染，下面两种方式都是可以的 */}
      {articleTypeDoing()}
      {a()}

      {/* 事件绑定 */}
      {/* 其中这个函数体可以额外定义出去，若是简单的那也可以像这样直接写在 JSX 代码里，这种方式就完全
      不必理会将变量或函数放return外面的要求 */}
      {/* 其中这个onClick单指点击事件 */}
      <button onClick={() => alert('Hello, React!')}>Click me</button>
      {/* 下面就没有传递实参，但也是可以在点击之后用到那个形参的 e 值 */}
      <button onClick={handleClick}>Click me2</button>
      <br />
      {/* 这里的 handleClickSelf 函数接收一个形参 name，并在点击时调用它,一定一定要用匿名函数来调用 */}
      <button onClick={() => handleClickSelf('Chen')}>Click me3</button>
      <br />
      <button onClick={(e) => handleClickSelfAndEvent('Chen' , e)}>Click me3</button>


    </div>
    
  );
}

export default App;
